import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConfigProvider, theme } from 'antd';
import { store } from './store';
import MainLayout from './layouts/MainLayout';
import BlankLayout from './layouts/BlankLayout';
import { useSelector } from 'react-redux';
import { RootState } from './store';
import AuthProvider from './components/AuthProvider';
import Login from './pages/Login';
import NotFound from './pages/error/NotFound';
import Forbidden from './pages/error/Forbidden';
import AppRoutes from './router';
import zhCN from 'antd/es/locale/zh_CN';
import {checkForUpdates} from "@/utils/versionChecker";
import VersionUpdate from "@/components/VersionUpdate";
import {version} from "@/config";

const AppContent = () => {
  const { primaryColor, isDarkMode } = useSelector((state: RootState) => state.theme);

  const [versionInfo, setVersionInfo] = React.useState<{ currentVersion: string; latestVersion: string } | null>(null);
  const [showUpdateModal, setShowUpdateModal] = React.useState(false);

  const CURRENT_VERSION = version;

  React.useEffect(() => {
    const checkVersion = async () => {
      const updateInfo = await checkForUpdates(CURRENT_VERSION);
      if (updateInfo) {
        setVersionInfo({
          currentVersion: CURRENT_VERSION,
          latestVersion: updateInfo.version,
        });
        setShowUpdateModal(true);
      }
    };
    // 首次加载时检查
    checkVersion();
    // 设置定时检查
    const interval = setInterval(checkVersion, 60000); // 每分钟检查一次
    return () => clearInterval(interval);
  }, []);

  const handleUpdate = () => {
    window.location.reload();
  };

  const handleCancel = () => {
    setShowUpdateModal(false);
  };

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: primaryColor,
        },
        algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
      }}
      locale={zhCN}
    >
      <BrowserRouter>
        <AuthProvider>
          <Routes>
            {/* 空白布局路由 */}
            <Route element={<BlankLayout />}>
              <Route path="/login" element={<Login />} />
              <Route path="/403" element={<Forbidden />} />
              <Route path="/404" element={<NotFound />} />
            </Route>
            
            {/* 主布局路由 */}
            <Route element={<MainLayout />}>
              <Route path="/*" element={<AppRoutes />} />
            </Route>
          </Routes>
        </AuthProvider>
      </BrowserRouter>

      {/* 版本更新弹窗 */}
      {versionInfo && (
          <VersionUpdate
              visible={showUpdateModal}
              currentVersion={versionInfo.currentVersion}
              latestVersion={versionInfo.latestVersion}
              onUpdate={handleUpdate}
              onCancel={handleCancel}
          />
      )}
    </ConfigProvider>
  );
};

function App() {
  return (
    <Provider store={store}>
      <AppContent />
    </Provider>
  );
}

export default App; 